<template>
  <view class="login-container">
    <uni-nav-bar left-icon="back" @clickLeft="handleClickLeft" title="俊漾儿明信片" :border="false" status-bar
      background-color="transparent" color="#222"></uni-nav-bar>
    <image src="../../static/logo.png" mode="widthFix" class="logo-image"></image>
    <view class="tabs">
      <view class="tab-item" @click="tab = 1" :class="{'active':tab==1}">密码登录</view>
      <view>|</view>
      <view class="tab-item" @click="tab = 2" :class="{'active':tab==2}">微信登录</view>
    </view>
    <view class="login-form">
      <template v-if="tab == 1">
        <view class="login-form-item">
          <input type="text" v-model="username" placeholder="请输入用户名" />
        </view>
        <view class="login-form-item">
          <input type="password" v-model="password" placeholder="请输入密码" />
        </view>

        <button type="default" @click="handleLogin" hover-class="is-hover">登录</button>
      </template>
      <template v-else>
        <!-- <view class="login-form-item">
          <input type="nickname" placeholder="请输入昵称" v-model="nickname" @input="getNickname" />
        </view> -->
        <button type="default" @click="handleWxLogin" hover-class="is-hover">微信登录</button>
      </template>

      <view style="margin-top: 40rpx;">
        <checkbox-group name="" @change="handleCheckboxChange">
          <label style="display: flex;align-items: center;">
            <checkbox :checked="agree" style="transform: scale(0.7);" />
            <view style="display: flex;">请阅读并同意<navigator url="/pages/protocol/protocol?type=1" style="color: #F44336;">
                《用户服务协议》</navigator>和
              <navigator url="/pages/protocol/protocol?type=2" style="color: #F44336;">《隐私政策》</navigator>
            </view>
          </label>
        </checkbox-group>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    userNameLogin,
    wxLogin,
    getUnionIdByCode
  } from '@/apis/user.js'
  const app = getApp()
  export default {
    data() {
      return {
        agree: false,
        username: '',
        password: '',
        tab: 2,
        nickname: ''
      };
    },
    methods: {
      handleWxLogin() {
        if (!this.agree) {
          this.$showtoast('请先阅读并同意《用户服务协议》和《隐私政策》')
          return;
        }
        const _this = this;
        uni.showModal({
          title: '登录授权',
          content: '是否同意微信登录',
          success: (res) => {
            if (res.confirm) {
              _this.wxLogin()
            }
          }
        })


      },
      wxLogin() {
        const _this = this;
        uni.login({
          success(res) {
            getUnionIdByCode({
              code: res.code
            }).then(result => {
              if (result.code == 200) {
                wxLogin({
                  wechat: result.data.unionId,
                  nickName: '听友' + Date.now()
                }).then(result => {
                  if (result.code == 200) {
                    app.globalData.userInfo = {
                      userName: result.data.nickName,
                      userId: result.data.userId,
                      phonenumber: result.data.phonenumber,
                      wechat: result.data.wechat,
                      deptId: result.data.dept.deptId
                    }
                    if (result.data.avatar) {
                      app.globalData.userInfo.avatar = 'https://' + result.data.avatar
                    }
                    uni.setStorageSync('userinfo', app.globalData.userInfo)
                    _this.$showtoast('登陆成功')
                    setTimeout(() => {
                      uni.navigateBack({
                        fail(e) {
                          console.log(e)
                        }
                      })
                      // uni.switchTab({
                      //   url: '/pages/index/index'
                      // })
                    }, 1000)

                  }
                })
              }

            })

          }
        })
      },
      handleClickLeft() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      getNickname(res) {
        let nickname = res.detail.value;
        this.nickname = nickname;
        console.log(this.nickname)
      },
      async handleLogin() {
        if (!this.agree) {
          this.$showtoast('请先阅读并同意《用户服务协议》和《隐私政策》')
          return;
        }
        if (this.username == "") {
          this.$showtoast('请输入用户名')
          return;
        }
        if (this.password == "") {
          this.$showtoast("请输入密码");
          return;
        }
        const result = await userNameLogin({
          username: this.username,
          password: this.password
        })
        if (result.code == 200) {
          app.globalData.userInfo = {
            userName: result.data.nickName,
            userId: result.data.userId,
            phonenumber: result.data.phonenumber,
            deptId: result.data.dept.deptId
          }
          if (result.data.avatar) {
            app.globalData.userInfo.avatar = 'https://' + result.data.avatar
          }
          uni.setStorageSync('userinfo', app.globalData.userInfo)
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      },
      handleCheckboxChange({
        detail
      }) {
        this.agree = detail.value.length > 0
      }
    }
  }
</script>

<style lang="scss">
  .login-container {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 188, 212, .18);
    box-sizing: border-box;
  }

  .logo-image {
    display: block;
    margin: 40rpx auto;
    width: 470rpx;
    height: 200rpx;
  }

  .login-form {
    padding: 30rpx;
    font-size: 26rpx;

    button {
      margin-top: 40rpx;
    }
  }

  .login-form-item {
    padding: 30rpx 0;
    border-bottom: 1px solid rgba(34, 34, 34, .23);
  }

  .tabs {
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    height: 30rpx;
    line-height: 30rpx;
    gap: 20rpx;
  }

  .tab-item.active {
    color: #109c8f;
  }
</style>